<template>
  <div class="Example">
    <!-- banner -->
    <div class="banner">
      <!-- 搜索框 -->
      <div class="search_box">
        <p>一站式代码设计素材平台</p>
        <!-- 在实例页面中隐藏 -->
        <div class="input_div" style="visibility:hidden;">
          <input placeholder="请输入内容搜索" type="text" @blur="input_Bure()" @focus="input_Focus()">
          <div class="btn_s"><img src="../assets/header/fdj.png">搜索 </div>
          <!-- 隐藏的搜索下拉 -->
          <div :class="{'addclass':search_show}" class="search_hot">
            <!-- 最近搜索 -->
            <div class="lately">
              <span>最近搜索:</span>
              <ul>
                <li>电商banner</li>
                <li>春天插画</li>
                <li>前端niubi</li>
              </ul>
            </div>
            <!-- 热搜榜 -->
            <ul class="Hot_search">
              <li v-for="(item,index) in Hot_list" :key="index">
                <div class="ranking">
                  <span :class="{'ranking_class':index<=2}">{{ index + 1 }}</span>
                  <span>{{ item.text }}</span>
                </div>
                <div class="result">
                  约{{ item.num }}结果
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 热搜词 -->
        <div class="Hot_wrods" style="visibility:hidden;">
          <span>热搜词: </span>
          <ul>
            <li v-for="(item,index) in Hot_wrods" :key="index">
              {{ item.title }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- banner -->
    <Example_com />
  </div>
</template>

<script>
  import Example_com from "../components/example_com.vue";
  // import Headerbg from '../components/Headerbg.vue';

  export default {
    name: 'Example',
    components: {
      Example_com
    },
    data() {
      return {
        // 热搜榜
        Hot_list: [{
            text: 'UI设计素材',
            num: '8,799'
          },
          {
            text: '春天',
            num: '8,799'
          },
          {
            text: '企业宣传',
            num: '8,799'
          },
          {
            text: '中国风背景',
            num: '8,799'
          },
          {
            text: '前端VUE',
            num: '8,799'
          },
          {
            text: '浏览器怪异模式和标准模式的区别在哪里，都来看看吧123456',
            num: '8,799'
          }
        ],
        // 热搜词
        Hot_wrods: [{
            title: '片头'
          },
          {
            title: '中国风'
          },
          {
            title: '企业宣传'
          },
          {
            title: '字幕'
          },
          {
            title: '抖音'
          },
          {
            title: '快闪'
          },
          {
            title: '科技'
          },
          {
            title: '风景'
          }
        ],
        search_show: false
      }
    },
    methods: {
      input_Focus() {
        this.search_show = true
      },
      input_Bure() {
        this.search_show = false
      }
    }
  }

</script>
<style lang="scss" scoped>
  .banner {
    width: 100%;
    position: relative;
    background: url("../assets/header/banner.png") no-repeat;
    height: 443px;

    // 搜索框
    .search_box {
      width: 690px;
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translate(-50%);

      // border:1px white solid;
      p {
        text-align: center;
      }

      p:first-child {
        font-size: 30px;
        color: #ffffff;
        line-height: 48px;
      }

      .input_div {
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 41px;
        position: relative;
        height: 60px;
        background: #ffffff;
        border-radius: 30px;

        input {
          font-size: 22px;
          width: 520px;
          border: none;
          outline: none;
        }

        .btn_s {
          width: 130px;
          background: #0bbed4;
          color: white;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 30px;
          font-size: 21px;
          cursor: pointer;
          padding: 1px 0;

          img {
            width: 23px;
            height: 23px;
            margin-right: 9px;
          }
        }

        // 隐藏的搜索下拉
        .search_hot {
          transition: all 0.5s ease-in;
          overflow: hidden;
          width: 556px;
          height: 0px;
          background: white;
          position: absolute;
          top: 70px;
          left: 10px;
          border-radius: 5px;
          border: none;
          outline: none;

          .lately {
            line-height: 34px;
            background: #f1f1f1;
            font-size: 14px;
            padding: 0 10px;
            color: #333333;
            display: flex;

            ul {
              display: flex;

              li {
                margin-left: 35px;
              }
            }
          }

          .Hot_search {
            padding: 10px 10px;

            li {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 7px 0;

              .ranking {
                display: flex;

                span:first-child {
                  width: 22px;
                  line-height: 22px;
                  display: block;
                  text-align: center;
                  font-size: 11px;
                  border-radius: 3px;
                  background: #e6e6e6;
                  border-radius: 3px;
                  color: #33cfff;
                }

                span:last-child {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 250px;
                  margin-left: 18px;
                  font-size: 14px;
                  color: #333333;
                }
              }

              // 前三名添加样式
              .ranking_class {
                background: #33cfff !important;
                color: #fff !important;
              }

              // 结果
              .result {
                color: #666666;
                font-size: 14px;
              }
            }
          }
        }

        // 显示过渡
        .addclass {
          height: 386px;
          border: 1px solid #33cfff;
        }
      }

      // 热搜词
      .Hot_wrods {
        width: 520px;
        display: flex;
        justify-content: center;
        color: white;
        font-size: 16px;
        text-align: center;
        margin: 30px auto;

        ul {
          display: flex;
          margin-left: 10px;

          li {
            margin-left: 5px;
            cursor: pointer;
          }

          li:hover {
            color: #F2F2F2;
          }
        }
      }
    }
  }

</style>
